<template>
  <div>
    <HeaderPage />
    <SearchHeader></SearchHeader>
    <navPage></navPage>
    <div
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <div class="regist-page">
        <div style="height: 40px; width: 100%"></div>
        <div id="progress-bar" class="auto-width">
          <div class="text">
            <span class="active">设置基础信息</span>
            <span
              class="round2"
              :style="{ color: index > 0 ? '#EE781B' : '#4A4A4A' }"
              >填写验证码</span
            >
            <span
              class="round3"
              :style="{ color: index > 1 ? '#EE781B' : '#4A4A4A' }"
              >认证结果</span
            >
          </div>
          <div class="bar-wrapper">
            <div class="bar active">
              <span class="round">1</span>
            </div>
            <div class="bar" id="round2">
              <span
                class="round"
                :style="{ background: index > 0 ? '#EE781B' : '#F7C89D' }"
                >2</span
              >
              <div
                class="line"
                :style="{ background: index > 0 ? '#EE781B' : '#F7C89D' }"
              ></div>
            </div>
            <div class="bar" id="round3">
              <span
                class="round fa fa-check"
                :style="{ background: index > 1 ? '#EE781B' : '#F7C89D' }"
                >3</span
              >
              <div
                class="line"
                :style="{ background: index > 1 ? '#EE781B' : '#F7C89D' }"
              ></div>
            </div>
          </div>
        </div>
        <div class="register-box">
          <h2 class="title">个人认证</h2>
          <div id="step-1" v-if="index === 0">
            <form id="step-1-form" action="" method="" autocomplete="off">
              <div class="input-group">
                <!--st1:phone-->
                <div class="inner-box">
                  <span class="lable">姓名</span>
                  <input
                    class="phone"
                    type="text"
                    name="phone"
                    placeholder="请输入身份证上的姓名"
                    autocomplete="new-password"
                    maxlength="11"
                    style="width: 246px"
                    v-model="dataForm.realName"
                  />
                  <span
                    class="prompt"
                    :class="[realNameValidate ? 'error' : '']"
                    >{{ realNamePrompt }}</span
                  >
                </div>
              </div>
              <div class="input-group">
                <!--st1:m_code-->
                <div class="inner-box">
                  <span class="lable">身份证号码</span>
                  <div class="wrapper">
                    <input
                      type="text"
                      id="m_code"
                      class="v-code"
                      name="m_code"
                      placeholder="请输入身份证号"
                      v-model="dataForm.cardId"
                      autocomplete="new-password"
                      maxlength="18"
                      @blur="cardValidate(dataForm.cardId)"
                    />
                  </div>
                  <div class="error">{{ cardErrorMessage }}</div>
                </div>
              </div>

              <div class="input-group">
                <div class="rule clearfix">
                  <div class="select-icon fl" @click="isArgee = !isArgee">
                    <img
                      src="../../assets/img/select.png"
                      alt=""
                      v-if="isArgee"
                    />
                    <img src="../../assets/img/noSelect.png" alt="" v-else />
                  </div>
                  <div class="fl">
                    <span>请阅读并同意</span>
                    <a href="javascript:;" @click="lookRuleType(3)"
                      >《隐私权政策协议》</a
                    >
                    <a href="javascript:;" @click="lookRuleType(1)"
                      >《e签宝服务协议》</a
                    >
                    <a href="javascript:;" @click="lookRuleType(2)"
                      >《数字证书协议》</a
                    >
                  </div>
                </div>
              </div>
              <input
                type="button"
                value="下一步"
                class="sub"
                @click="toNextSecond(1)"
              />
            </form>
          </div>
          <div id="step-2" v-if="index === 1">
            <form id="step-2-form" action="" method="post" autocomplete="off">
              <div class="input-group">
                <div class="inner-box">
                  <!--st2:userId-->
                  <span class="lable">验证码</span>
                  <input
                    class="phone"
                    type="text"
                    autocomplete="new-password"
                    placeholder="请输入验证码"
                    v-model="authcode"
                  />
                  <div class="error" style="left: 466px; width: 200px">
                    {{ codeMessage }}
                  </div>
                </div>
              </div>

              <input
                type="button"
                value="下一步"
                class="sub"
                style="margin-left: 167px"
                @click="toNextSecond(3)"
              />
            </form>
          </div>
          <div id="step-3" v-if="index === 3">
            <div class="container clearfix" v-if="pass">
              <img src="../../assets/img/succ.png" class="fl" />

              <p class="success fl">恭喜您！认证已通过</p>
            </div>
            <div class="container clearfix" v-else>
              <img src="../../assets/img/fail.png" class="fl" />
              <p class="fail fl">{{ failResaon }}</p>
            </div>
            <nuxt-link to="/" class="back-home">返回首页</nuxt-link>
          </div>
        </div>
      </div>
      <div style="height: 50px"></div>
    </div>
    <FooterPage></FooterPage>
    <el-dialog
      :title="
        ruleType == 1
          ? 'e签宝服务协议'
          : ruleType == 2
          ? '数字证书协议'
          : '隐私权政策协议'
      "
      :visible.sync="dialogVisible"
      width="80%"
    >
      <eRule v-if="ruleType == 1"></eRule>
      <DCRule v-else-if="ruleType == 2"></DCRule>
      <privateRule v-else></privateRule>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import HeaderPage from "../../components/head";
import SearchHeader from "../indexHome/searchHeader";
import FooterPage from "../../components/footer";
import selectMock from "../../components/selectMock";
import navPage from "../../components/nav";
import { isCardID, username } from "../../plugins/validate";
import Cookie from "js-cookie";
import eRule from "../authentication/eRule";
import DCRule from "../authentication/DCRule";
import privateRule from "../authentication/privateRule";
export default {
  components: {
    HeaderPage,
    SearchHeader,
    FooterPage,
    selectMock,
    navPage,
    eRule,
    DCRule,
    privateRule,
  },
  data() {
    return {
      dialogVisible: false,
      ruleType: 1, //规则类型
      isArgee: false, //是否同意协议
      index: 0,
      pass: true,
      dataForm: {
        cardId: "",
        realName: "",
      },
      cardErrorMessage: "",
      authcode: "", //手机验证码
      loading: false,
      realNamePrompt: "请填写身份证上的姓名",
      realNameValidate: false,
      codeMessage: "",
      failResaon: "因为某个原因所以您失败了",
    };
  },
  mounted() {
    this.getDetail();
  },
  methods: {
    getDetail() {

      this.$http(
        "get",
        "/sys/user/getUser.do?userId=" + Cookie.get("user")
      ).then((res) => {
        if (res.code == "0000") {
          //NO: 未认证, YES: 已认证, GONING: 进行中, FAIL: 认证失败
          var status = res.result.identityStatus;

          if (status === "NO") {
            this.index = 0;

          } else if (status === "YES") {
            this.index = 3;
            this.pass = true;

          } else if (status === "FAIL") {
            this.index = 3;
            this.pass = false;
            this.failResaon = res.result.identityFailmsg;

          }
        }
      });
    },
    // 查看协议
    lookRuleType(index) {
      this.dialogVisible = true;
      this.ruleType = index;
    },
    // 去注册第二步
    toNextSecond(index) {
      if (index == 1) {
        console.log();

        if (username(this.dataForm.realName) != true) {
          this.realNameValidate = true;
          this.realNamePrompt = username(this.dataForm.realName);
          return;
        } else {
          this.realNameValidate = false;
          this.realNamePrompt = "请填写身份证上的姓名";
        }
        if (this.cardErrorMessage !== "") {
        }
        if (this.cardValidate(this.dataForm.cardId) == false) {
          return false;
        }
        if (this.isArgee) {
          this.loading = true;
          this.$http(
            "post",
            "/sys/user/personal3keys.do",
            this.dataForm,
            "json"
          ).then((res) => {
            this.loading = false;
            if (res.code == "0000") {
              this.index = index;
            }
          });
        } else {
          this.$message({
            type: "error",
            message: "请勾选并阅读协议",
          });
        }
      } else if (index == 3) {
        var regex = /^\d{6}$/;
        if (!regex.test(this.authcode)) {
          this.codeMessage = "请输入正确的验证码";
          return;
        } else {
          this.codeMessage = "";
          this.loading = true;
          this.$http(
            "post",
            "/sys/user/personal3keysVerify.do?authcode=" + this.authcode
          ).then((res) => {
            if (res.code == "0000") {
              this.loading = false;
              this.index = index;
              this.pass = true;
            } else {
              this.pass = false;
            }
          });
        }
      }
    },
    cardValidate(val) {
      console.log(val);
      var flag = false;
      var result = isCardID("", val, (res) => {
        if (res != undefined) {
          this.cardErrorMessage = res.message;
          flag = false;
        } else {
          this.cardErrorMessage = "";
          flag = true;
        }
      });
      return flag;
    },
  },
};
</script>
<style scoped>
.prompt {
  font-size: 14px;
  color: #b9b9b9;
  margin-left: 10px;
}
.user-info {
  margin-bottom: 50px;
}
.user-info p {
  line-height: 40px;
}
.user-info p span:nth-child(1) {
  font-size: 16px;
  color: #606266;
  font-size: 14px;
}
.user-info p span:nth-child(2) {
  font-size: 16px;
  color: #4a4a4a;
  font-size: 18px;
}
.user-info p:nth-child(1) {
  font-size: 16px;
  color: #4a4a4a;
}
.auto-width {
  width: 1200px;
  margin: 0 auto;
}
.prompt h2 {
  font-size: 14px;
  color: #606266;
}
.prompt p {
  color: #9b9b9b;
  font-size: 14px;
  line-height: 160%;
}
.prompt p span {
  color: #ee781b;
}
#progress-bar {
  width: 1049px;
  height: 130px;
  background: #f6f6f6;
  border-radius: 4px;
}
#progress-bar .text {
  margin-bottom: 15px;
  font-size: 0;
  padding-top: 25px;
}
#progress-bar .text span {
  display: inline-block;
  width: 32.33%;
  font-size: 16px;
  text-align: center;
  color: #4a4a4a;
}
#progress-bar .text span.active {
  color: #ee781b;
}
#progress-bar .bar-wrapper {
  font-size: 0;
}
#progress-bar .bar-wrapper .bar {
  width: 32.33%;
  text-align: center;
  display: inline-block;
  position: relative;
}
#progress-bar .bar-wrapper .bar .round {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  font-size: 18px;
  color: #fff;
  background: #cdcdcd;
  display: inline-block;
  position: relative;
  z-index: 50;
}
#progress-bar .bar-wrapper .bar .line {
  width: 100%;
  height: 7px;
  background: #cdcdcd;
  position: absolute;
  left: -50%;
  top: 16px;
  z-index: 1;
}
#progress-bar .bar-wrapper .bar.active .round,
#progress-bar .bar-wrapper .bar.active .line {
  background: #ee781b;
}
.register-box {
  width: 1200px;
  margin: 0 auto;
  background: #fff;
  padding: 40px 0;
  height: auto;
}
.regist-page {
  background: #fff;
  width: 1200px;
  margin: 10px auto;
}
#step-1 {
  width: 720px;
  margin: 0 auto;
  margin-bottom: 50px;
}
#step-2 {
  width: 520px;
  margin: 0 auto;
  margin-bottom: 50px;
}
#step-1 .input-group,
#step-2 .input-group {
  position: relative;
  height: 60px;
}
#step-1 .input-group .inner-box,
#step-2 .input-group .inner-box {
  height: 50px;
  line-height: 50px;
  position: relative;
}
#step-1 .input-group .inner-box .lable,
#step-2 .input-group .inner-box .lable {
  font-size: 14px;
  display: inline-block;
  width: 125px;
  text-align: right;
  margin-right: 35px;
  color: #000000;
  height: 36px;
  line-height: 36px;
}
#step-1 .input-group .inner-box .phone,
#step-2 .input-group .inner-box .phone {
  height: 35px;
  width: 296px;
  background: #f6f6f6;
  border: 1px solid #e7e7e7;
  text-indent: 10px;

  font-size: 14px;
}
.error {
  color: red !important;
  font-size: 14px;
  position: absolute;
  left: 427px;
  top: 0;
}
.sendSms {
  border: 0;
}
.sendSms:active {
  border: 0;
}
#step-1 .input-group .inner-box .wrapper,
#step-2 .input-group .inner-box .wrapper {
  height: 50px;
  line-height: 50px;
  display: inline-block;
  vertical-align: top;
  font-size: 0;
  position: relative;
}
#step-1 .input-group .inner-box .wrapper {
  width: 350px;
}
#step-2 .input-group .inner-box .wrapper {
  width: 298px;
}
#step-1 .input-group .inner-box .wrapper .v-code,
#step-2 .input-group .inner-box .wrapper .v-code {
  width: 246px;
  height: 35px;
  box-sizing: border-box;
  vertical-align: middle;
  font-size: 14px;
  vertical-align: middle;
  background: #f6f6f6;
  border: 1px solid #e7e7e7;
}

#step-1 .input-group .inner-box .wrapper .box,
#step-2 .input-group .inner-box .wrapper .box {
  display: inline-block;
  width: 91px;
  height: 35px;
  background: #ffe7e7;
  border-radius: 2px;
  text-align: center;
  line-height: 35px;
  color: #d0021b;
  font-size: 14px;
  vertical-align: middle;
  margin-left: 6px;
}
#step-1 .input-group .inner-box .wrapper .box img {
  width: 100px;
  height: 35px;
}
#step-1 .input-group .inner-box .wrapper .box.box:hover,
#step-2 .input-group .inner-box .wrapper .box.box:hover {
  cursor: pointer;
}
#step-1 .input-group .inner-box .wrapper p,
#step-2 .input-group .inner-box .wrapper p {
  display: block;
  height: 50px;
  line-height: 50px;
  position: absolute;
  top: 0;
  right: -130%;
  font-size: 16px;
  display: none;
}
#step-1 .input-group .inner-box .wrapper p .fa,
#step-2 .input-group .inner-box .wrapper p .fa {
  color: #2998e5;
}
#step-1 .input-group .warning,
#step-2 .input-group .warning {
  position: absolute;
  width: 155%;
  bottom: 5px;
  text-indent: 158px;
  color: #dd4249;
  display: none;
}
#step-1 .input-group .warning .fa,
#step-2 .input-group .warning .fa {
  margin-right: 8px;
}
#step-1 .sub,
#step-2 .sub {
  display: block;
  margin-top: 10px;
  border: none;
  color: #ffffff;
  cursor: pointer;
  width: 246px;
  height: 44px;
  background: #ee781b;
  border-radius: 4px;
}
#step-1 .sub {
  margin-left: 165px;
}
#step-1 .sub[disabled],
#step-2 .sub[disabled] {
  background: #aaaaaa !important;
  cursor: not-allowed;
}
#step-1 input[disabled] {
  cursor: not-allowed;
}

#step-2 .wrapper input {
  vertical-align: middle;
}
#step-2 .wrapper .safety {
  position: absolute;
  height: 50px;
  width: 150px;
  top: -5px;
  right: -75%;
  overflow: hidden;
}
#step-2 .wrapper .safety dl {
  width: 33.33%;
  float: left;
  text-align: center;
}
#step-2 .wrapper .safety dl dt {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #cdcdcd;
}
#step-2 .wrapper .safety dl dd {
  width: 100%;
  height: 10px;
  background: #cdcdcd;
}
#step-2 .wrapper .safety .safety-1.active dt {
  color: #1a1a1a;
}
#step-2 .wrapper .safety .safety-1.active dd {
  background: #dd5347;
}
#step-2 .wrapper .safety .safety-2.active dt {
  color: #1a1a1a;
}
#step-2 .wrapper .safety .safety-2.active dd {
  background: #faba6d;
}
#step-2 .wrapper .safety .safety-3.active dt {
  color: #1a1a1a;
}
#step-2 .wrapper .safety .safety-3.active dd {
  background: #1ba261;
}

#step-3 .container {
  width: 500px;
  margin: 0 auto 20px auto;
}

#step-3 .container img {
  display: inline-block;
  width: 55px;
  height: 55px;
  vertical-align: middle;
  margin-right: 25px;
}

#step-3 .container p {
  width: 55px;
  height: 55px;
  line-height: 55px;
  width: 300px;
  font-size: 15px;
}
#step-3 .time-out {
  text-align: center;
  color: #ee781b;
}
.succ {
  color: #6bc285 !important;
}
.back-home {
  width: 120px;
  height: 35px;
  background: #f48d06;
  line-height: 35px;
  border-radius: 4px;
  font-size: 14px;
  color: #fff;
  text-align: center;
  margin-left: 430px;
  display: block;
  margin-top: 35px;
}
.back-home:hover {
  opacity: 0.8;
}
.title {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
  position: relative;
  left: -100px;
}
.input-group .rule img {
  width: 15px;
  height: 15px;
}
.select-icon {
  margin-right: 5px;
}
.input-group .rule a:hover {
  color: #f48d06;
}
</style>
